victory-tooltip
Advanced tools
victory-tooltip@^30.0.0 exports VictoryTooltip and Flyout components
View these docs at https://formidable.com/open-source/victory/docs/victory-tooltip to see live examples.
VictoryTooltip renders a tooltip component with a set of default events. When VictoryTooltip is used as a label component for any Victory component that renders data, it will attach events to rendered data components that will activate the tooltip when hovered. VictoryTooltip renders text as well as a configurable Flyout container.
type: boolean
The active prop specifies whether the tooltip component should be displayed.
type: boolean
When true, tooltip events will set the active prop on both data and label elements.
default: activateData={false}
type: number
The angle prop specifies the angle to rotate the tooltip around its origin point.
type: number || function
The cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number or a function of datum.
type: array[object]
Victory components can pass a data prop to their label component. This can be useful in custom components that need to make use of the entire dataset.
type: object
Victory components can pass a datum prop to their label component. This can
be used to calculate functional styles, and determine text.
type: number || function
The dx prop defines a horizontal shift from the x coordinate.
type: number || function
The dy prop defines a vertical shift from the y coordinate.
type: object
The events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory's event system, event handlers will be called with the event, the props of the component is attached to, and an eventKey.
examples: events={{onClick: (evt) => alert("x: " + evt.clientX)}}
type: object
The style prop applies SVG style properties to the rendered flyout container. These props will be passed to the flyoutComponent.
type: element
The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip. The new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy, index, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If flyoutComponent is omitted, a default Flyout component will be created with props described above.
examples: flyoutComponent={<Flyout x={50} y={50}/>}, flyoutComponent={<MyCustomFlyout/>}
default: <Flyout/>
type: element
The groupComponent prop takes a component instance which will be used to create group elements for use within container elements. This prop defaults to a <g> tag.
default: groupComponent={<g/>}
type: number || function
The height prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, height will be determined based on an approximate text size calculated from the text and style props provided to VictoryTooltip.
type: boolean
The horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom. This is useful when an orientation prop is not provided, and data will determine the default orientation. i.e. negative values result in a left orientation and positive values will result in a right orientation by default.
type: number || string
The index prop represents the index of the datum in the data array.
type: element
The labelComponent prop takes a component instance which will be used to render each tooltip label. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, datum, verticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a new VictoryLabel will be created with the props described above.
examples: labelComponent={<VictoryLabel dy={20}/>}, labelComponent={<MyCustomLabel/>}
default: <VictoryLabel/>
type: function || "top" || "bottom" || "left" || "right"
The orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on. This prop can be given as "top", "bottom", "left", "right", or as a function of datum that returns one of these values. If this prop is not provided it will be determined from the sign of the datum, and the value of the horizontal prop.
type: number || function
The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum.
type: number || function
The pointerWidth prop determines the width of the base of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum.
type: boolean
When renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element within VictoryContainer. Note: This prop should not be set to true when using a custom container element.
type: object
The style prop applies SVG style properties to the rendered <text> element.
type: string || number || function || array[string || number]
The text prop defines the text VictoryTooltip will render. The text prop may be given as a string, number, or function of datum. When VictoryLabel is used as the labelComponent, strings may include newline characters, which VictoryLabel will split in to separate <tspan/> elements.
type: number || function
The width prop defines the width of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, width will be determined based on an approximate text size calculated from the text and style props provided to VictoryTooltip.
type: number
The x prop defines the x coordinate to use as a basis for positioning the tooltip element.
type: number
The y prop defines the y coordinate to use as a basis for positioning the tooltip element.
31.2.0 (2019-01-27)
Axis improvements
axisValue prop for both cartesian and polar charts. This prop allows users to position an axis relative to a value on the opposite axis. Values may be given as numbers, dates, or strings. This prop only works for axis components when they are nested within VictoryChart. Standalone axes can still be positioned using offsetX and offsetY` props.Removes all deprecated lifecycle methods
componentWillReceiveProps lifecycle methods and adds shouldComponentUpdate logic for higher level components. Previously only the lowest level components performed sCU checks.componentWillMount with componentDidMountbug fixes
FAQs
Tooltip Component for Victory
The npm package victory-tooltip receives a total of 147,546 weekly downloads. As such, victory-tooltip popularity was classified as popular.
We found that victory-tooltip demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.